require.config({
    paths: {
        vue: "../encaptool/encvue",
        iview: "../utiltool/iview/iview",
        jquery: "../utiltool/jquery/jquery.min",
        router: "../encaptool/encarouter",
        axios: "../encaptool/encaxios",
        echarts: "../utiltool/echarts/echarts.min"
    },
    shim: {
        iview: ["vue"]
    }
});
require(["vue", "iview", "echarts", "jquery", "router", "axios"], function (
    Vue,
    iview,
    echarts,
    $,
    Router,
    axios
) {
    Vue.use(iview);
    new Vue({
        el: "#nomenclature",
        data() {
            return {
                xTotal: [],
                yTotal: [],
                sumVolumeLength: 0,
                spanShow: true
            };
        },
        mounted() {
            this.getSumVolume();
        },
        methods: {
            drawChart() {
                let totalChart = echarts.init(document.getElementById('totalChart'));
                var option = {
                    title: {
                        text: '车辆运送立方情况（总数' + this.sumVolumeLength + "）",
                        left: 'center'
                    },
                    xAxis: {
                        name: '车牌号',
                        boundaryGap: false,
                        data: this.xTotal
                    },
                    yAxis: {
                        name: '总立方和'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    dataZoom: [{
                        type: 'slider',
                        end: 5,
                        filterMode: 'empty',
                        realtime: false,
                        showDetail: false
                    }],
                    visualMap: {
                        top: '10%',
                        right: '3%',
                        pieces: [{
                            gt: 0,
                            lte: 10,
                            color: '#a4d8e3'
                        }, 
                        {
                            gt: 10,
                            lte: 50,
                            color: '#15afcb'
                        }, 
                        {
                            gt: 50,
                            lte: 55,
                            color: '#1193f3'
                        },
                        {
                            gt: 50,
                            color: '#036'
                        }],
                        outOfRange: {
                            color: '#069'
                        }
                    },
                    series: [{
                        name: '最大运送立方数',
                        type: 'line',
                        data: this.yTotal,
                        markLine: {
                            silent: true,
                            symbolSize: 10,
                            data: [
                            {
                                yAxis: 10
                            },
                            {
                                yAxis: 50
                            }, 
                            {
                                yAxis: 55
                            }]
                        }
                    }]
                }
                totalChart.setOption(option);
            },
            getSumVolume() {
                var setting = {
                    method: 'get',
                    url: '/YF/public/api/getSumVolume'
                };
                axios.call(this, function(res) {
                    if (res.code === 0) {
                        this.sumVolume = res.data;
                        this.sumVolumeLength = res.data.length;
                        for (i = 0; i < this.sumVolume.length; i++) {
                            this.xTotal.push(this.sumVolume[i]['truckid']);
                            this.yTotal.push(this.sumVolume[i]['volume']);
                        }
                        this.spanShow = false;
                        this.drawChart();
                    } else {
                        this.$Message.info('数据为空');
                    }
                }.bind(this), {
                    setting: setting
                });
            }
        },
        computed: {
        }
    });
});